import { Fragment, defineComponent } from 'vue';
import { choicePage, choice, headerWrap, header, content, right, title, bottom, gotoWrap, gotoContent, close } from './ChoiceInput.module.scss';
import { map, navi, poi } from '@/store';
import closeImg from '@/assets/img/choice/close.png'
import { routeInputObj } from '../routeInput/RouteInput';
import { closeToast, showLoadingToast } from 'vant';

/*
---文件
*/
export default defineComponent({
    name: 'ChoiceInput',
    methods: {
        choicePoint() {
            // 自选点
            routeInputObj.origin = "choice";
            if (poi.type == "start") {
                poi.start = { ...poi.now };
                localStorage.setItem("startPoi", JSON.stringify(poi.start));
            } else {
                poi.end = { ...poi.now };
                localStorage.setItem("endPoi", JSON.stringify(poi.end));
            }

            if (navi.verifyRoutePois()) {
                showLoadingToast({
                    message: '路线规划中',
                    forbidClick: true,
                    duration: 0,
                });
                //规划路线并显示
                navi.startRoute();
                closeToast();

                map.choiceFlag = false;
                map.routeFlag = false;
                poi.infoType = "";
            }
        },
        choiceClosed() {
            map.routeFlag = true;
            map.routeInputFlag = true;
            map.pathFlag = true;
            map.choiceFlag = false;
        },
    },
    render() {
        return <Fragment>
            <div class={choicePage} v-show={map.choiceFlag}>
                <div class={choice}>
                    <div class={headerWrap}>
                        <img class={header} src={poi.now.poiImgMoblie} />
                        {poi.now.floorId-1 > 0 ? <span class={content}>{poi.now.floorId-1}F</span> : <span class={content}>MB</span>}
                    </div>
                    <div class={right}>
                        <span class={title}>{poi.now.poiName}</span>
                        <div class={bottom}>
                            <div class={gotoWrap} onClick={this.choicePoint}>
                                <span class={gotoContent}>确认选点</span>
                            </div>
                        </div>
                    </div>
                    <img class={close} src={closeImg} onClick={this.choiceClosed} />
                </div>
            </div>
        </Fragment>;
    },
});